<!doctype html>
<html>
	<meta charset="utf-8">
	<title>Basic usage of the jQuery UI dialog</title>

	<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>-->
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>-->
	<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/ui_custom.css">
	<!--
	<script type="text/javascript">
	
	$(document).ready(function() {
		var $dialog = $('<div></div>')
			.html('This dialog will show every time!')
			.dialog({
				autoOpen: false,
				title: 'Basic Dialog'
			});

		$('#opener').click(function() {
			$dialog.dialog('open');
			// prevent the default action, e.g., following a link
			return false;
		});
	});
	</script>
	-->
	<script type ="text/javascript">
	$(function() {
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"Create an account": function() {					
					$( this ).dialog( "close" );					
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
			$( "#opener" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			});
	});
	</script>
	
</head>
<body>

<p>This is an example from the Nemikor Blog article <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/">Basic usage of the jQuery UI dialog</a>.</p>

<button id="opener">Open the dialog</button>

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>


</body>
</html>
